<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制曲线</title>
  </head>
  <body>
    <script>
      (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 400;
        document.body.append(canvas);

        const ctx = canvas.getContext("2d");

        const fillText = () => {
          ctx.font = " bold italic 40px sans-serif";
          ctx.fillText("DMC", 200, 200);
        };
        // fillText();
        const strokeText = () => {
          ctx.font = "bold italic 80px sans-serif";
          ctx.strokeText("DMC", 200, 200, 500);
          ctx.arc(200, 200, 4, 0, Math.PI * 2);
          ctx.fill();
        };
        // strokeText();
        const anchorText = () => {
          ctx.textAlign = "center";
          ctx.font = "80px sans-serif";
          ctx.textBaseline = "middle";
          ctx.strokeText("DMC", 200, 200, 500);
          const obj1 = ctx.measureText("DMC");
          console.log("obj1", obj1);
          ctx.font = "20px sans-serif";
          ctx.strokeText("DMC", 300, 400, 500);

          const obj2 = ctx.measureText("DMC");
          console.log("obj2", obj2);

          ctx.beginPath();
          ctx.fillStyle = "#f00";
          ctx.arc(200, 200, 4, 0, Math.PI * 2);
          ctx.fill();
        };
        anchorText();
      })();
    </script>
  </body>
</html>
